'use client';
import React from 'react';
import {ThemeProvider} from '@mui/material/styles';
import {StyledEngineProvider} from '@mui/material';

import CssBaseline from '@mui/material/CssBaseline';
import NextAppDirEmotionCacheProvider from './EmotionCache';
import theme from './theme';

// MuiClassNameSetup.js
// import {unstable_ClassNameGenerator as ClassNameGenerator} from '@mui/material/className';
// ClassNameGenerator.configure((componentName) =>
//   componentName.replace('Mui', 'Pan'),
// );

export default function ThemeRegistry({children}: {children: React.ReactNode}) {
  return (
    <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
      <ThemeProvider theme={theme}>
        <StyledEngineProvider injectFirst>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
        </StyledEngineProvider>
        {children}
      </ThemeProvider>
    </NextAppDirEmotionCacheProvider>
  );
}
